<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分类:</span>
      <el-select v-model="type_value" palceholder="请选择文章类型">
        <el-option
          v-for="item in category_list"
          :key="item.name + item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>
      <el-button class='d-i-b m-10-l' type="primary" @click="add_article_page_category">添加文章类型</el-button>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>* 选择文章所属分类（必填）</span>
    </div>
    <div class='app-row m-50-t'>
      <span class="title bold width-100 align-right">标题:</span>
      <el-input class='flex-1' v-model="title_value" placeholder="标题不能为空"></el-input>
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">是否发布:</span>
      <el-radio v-model="distribution_radio" label="1">是</el-radio>     
      <el-radio v-model="distribution_radio" label="2">否</el-radio>     
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">首页推荐:</span>
      <el-radio v-model="recommend_radio" label="1">是</el-radio>     
      <el-radio v-model="recommend_radio" label="2">否</el-radio>     
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">标题字体:</span>
      <el-radio v-model="font_radio" label="1">正常</el-radio>     
      <el-radio v-model="font_radio" label="2"><span class='bold'>粗体</span></el-radio>     
      <el-radio v-model="font_radio" label="3"><span style="font-style: italic">斜体</span></el-radio>     
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">标题颜色:</span>
      <el-color-picker v-model="title_color"></el-color-picker>  
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">排序:</span>
      <el-input class='flex-1' v-model="rank_value"></el-input>
    </div>
    <div class='m-50-t'>
      <span class="title bold" style="margin-left: 30px">关联相关学生或者教师:</span>
    </div>
    <div class='flex m-50-t'>
      <span class="title bold width-100 align-right"></span>
      <div class='' style="width: 100%">
        <div v-if="setting_article" class="m-30-b">
          <div>
            <span>学生或老师名字:</span>
            <span class='m-100-l'>{{}}</span>
          </div>
        </div>
        <div class="gray-line"></div>
        <el-button type="primary" class='m-10-t' @click="choose_stu_tec">选择</el-button>
        <div class='annotation m-10-t'>
          <span>* 选择要关联的人</span>
        </div>
      </div>
    </div>
    <div class="m-50-t">
      <span class="title bold align-right width-100 d-i-b" style="position: relative; top:20px">内容:</span>
      <el-row>
        <el-col :span="18" :offset='3'>
          <editor id="editor_id" height="500px" width="100%" :content.sync="editorText"
              :afterChange="afterChange()"
              :loadStyleMode="false"
              @on-content-change="onContentChange">
          </editor>
        </el-col>
      </el-row>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">SEO关键词:</span>
      <el-input class='flex-1'></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">SEO描述:</span>
      <el-input class='flex-1' type="textarea" :rows='2'></el-input>
    </div>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加文章</el-button>
    </div>
    <el-dialog
      title="选择要关联的学生或老师"
      :visible.sync="choose_dialog"
      width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="choose_dialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm_button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import editor from '@/components/kindeditor/index.vue'
  import article_page_request from "@/api/article_page_request"
  import article_page_category_request from "@/api/article_page_category_request"
  export default {
    name: 'article_page_add',
    data() {
      return {
        type_value: "",
        rank_value: "",
        category_list: [],
        title_value: '',
        font_radio: "1",
        distribution_radio: '1',
        recommend_radio: '1',
        title_color: '#111',
        setting_article: false,
        choose_dialog: false,
        editorText: '', // 双向同步的变量
        editorTextCopy: ''  // content-change 事件回掉改变的对象
      }
    },
    components: {
      editor
    },
    created() {
      this.get_category_list()
    },
    mounted() {
  
    },
    methods: {
      add_button() {
        if (this.title_value == '') {
          this.$message.error("请输入文章名称")
          return
        }
        if (this.editorTextCopy == '') {
          this.$message.error("请输入文章内容")
          return
        }
        let params = {
          title: this.title_value,
          content: this.editorTextCopy,
          category_id: 0,
        }
        article_page_request.add_article_page(params, res=> {
          this.$router.push('/article_page/article_page')
        })
      },
      get_category_list() {
        let params = {}
        article_page_category_request.article_page_category_list(params, res=> {
          this.category_list = res.data
        })
      },
      add_article_page_category() {
        this.$router.push('/system/article_page_category_add')
      },
      choose_stu_tec() {
        this.choose_dialog = true
      },
      confirm_button() {
        this.choose_dialog = false
        this.setting_article = true
      },
      onContentChange (val) {
        this.editorTextCopy = val;
        console.log(this.editorTextCopy);
      },
      afterChange () {
      },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>